<template>
    <div class='approval'>
      <el-card class="box-card" style="margin-top: 110px;overflow:scroll;">
        <div class="head-title2">
          <div class='title'>
            {{$t('achievements.title1')}}
          </div>
          <div class="info">
            <el-tooltip placement="left">
              <div slot="content">
                {{define}}
              </div>
              <div class="btns"></div>
            </el-tooltip>
          </div>
        </div>
        <div class='menu-search'> 
            <div class='menu-title'>
              <!-- 申请时间 -->
              <div class='searchItem searchItem-date'>
                <span>{{$t('approval.time')}}</span>
                <el-date-picker
                  size='small'
                  v-model="listQuery.startDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.beginDate')"
                ></el-date-picker>
                <b>{{$t('approval.go')}}</b>
                <el-date-picker
                  size='small'
                  v-model="listQuery.endDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.endDate')"
                ></el-date-picker>
              </div>
              <!-- 到期时间 -->
              <!-- <div class='searchItem searchItem-date'>
                <span>{{$t('approvalDetail.lastPayDate')}}</span>
                <el-date-picker
                  size='small'
                  v-model="listQuery.lastPayStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.beginDate')"
                ></el-date-picker>
                <b>{{$t('approval.go')}}</b>
                <el-date-picker
                  size='small'
                  v-model="listQuery.lastPayEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.endDate')"
                ></el-date-picker>
              </div> -->
              <!-- 是否续贷 -->
              <div class='searchItem'>
                <span>{{$t('orderQuery.ctnLoan')}}</span>
                <el-select v-model='listQuery.isContinuedLoan' size='small'>
                  <el-option
                  v-for='item in conLoan'
                  :key='item.value'
                  :label='item.label'
                  :value='item.value'>
                  </el-option>
                </el-select>
              </div>
              <!-- 放款时间 -->
              <div class='searchItem searchItem-date'>
                <span>{{$t('approvalDetail.loanTime')}}</span>
                <el-date-picker
                  size='small'
                  v-model="listQuery.loanStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.beginDate')"
                ></el-date-picker>
                <b>{{$t('approval.go')}}</b>
                <el-date-picker
                  size='small'
                  v-model="listQuery.loanEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.endDate')"
                ></el-date-picker>
              </div>
              <!-- 结清时间 -->
              <div class='searchItem searchItem-date'>
                <span>{{$t('loanDetails.jieqingTime')}}</span>
                <el-date-picker
                  size='small'
                  v-model="listQuery.repaymentStartDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.beginDate')"
                ></el-date-picker>
                <b>{{$t('approval.go')}}</b>
                <el-date-picker
                  size='small'
                  v-model="listQuery.repaymentEndDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="$t('rule.endDate')"
                ></el-date-picker>
              </div>
              <!-- 订单状态 -->
              <div class='searchItem'>
                <span>{{$t('approvalDetail.orderStatus')}}</span>
                <el-select v-model='listQuery.orderStatus' size='small'>
                  <el-option
                  v-for='item in orderStatusList'
                  :key='item.value'
                  :label='item.label'
                  :value='item.value'>
                  </el-option>
                </el-select>
              </div>
              <!-- 订单ID -->
              <div class="searchItem">
                <span>{{$t('collDetail.orderIds')}}</span>
                <el-input v-model='listQuery.orderId' :placeholder="$t('collDetail.orderIds')" size='small'></el-input>
              </div>
              <!-- 手机号 -->
              <div class="searchItem">
                <span>{{$t('collDetail.phoneNo')}}</span>
                <el-input v-model='listQuery.mobile' :placeholder="$t('collDetail.phoneNo')" size='small'></el-input>
              </div>
              <!-- 姓名 -->
              <div class="searchItem">
                <span>{{$t('user.name')}}</span>
                <el-input v-model='listQuery.userName' :placeholder="$t('user.name')" size='small'></el-input>
              </div>
            </div>
            <div class='menu-title-btn'>
                <button type='button' @click='search'>
                    {{$t('btn.query')}}
                </button>
                <button type='button' @click='reset'>
                    {{$t('btn.reset')}}
                </button>
                <button type='button' :disabled="expDis" @click="handleDownload" v-if="loanDetails_btn_export">
                    {{$t('btn.export')}}
                </button>
                <button type='button' :disabled="expDis" @click="handleViewExcelUrl" v-if="loanDetails_btn_black_export">
                    {{$t('loanDetails.cxDcdz')}}
                </button>
            </div>
        </div>
      </el-card>
      <el-card class='box-card' style="margin-top: 10px;margin-bottom: 20px;">
        <div class='title'>
            {{$t('DailyStatistics.ListDetails')}}
        </div>
        <el-table
            :sum-text="$t('ApprReport.total')"
            v-loading="listLoading"
            ref='multipleTable'
            :data='tableData'
            tooltip-effect='dark'
            style='width: 100%; margin-top: 5px;'
            @selection-change='handleSelectionChange'
            border
            size='mini'>
            <!-- 订单ID -->
            <el-table-column
            header-align='center'
            align='center'
            prop='orderId'
            width="140"
            :label="$t('collDetail.orderIds')">
            </el-table-column>
            <!-- 手机号码 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='appUserName'
            width="140"
            :label="$t('collDetail.phoneNo')">
            </el-table-column>
            <!-- 姓名 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='userRealName'
            width="140"
            :label="$t('user.name')">
            </el-table-column>
            <!-- 是否续借 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='isContinuedLoanValue'
            width="140"
            :label="$t('loanDetails.isGoLoan')">
            </el-table-column>
            <!-- 申请金额 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='applyAmt'
            width="140"
            :formatter="cashFormatter"
            :label="$t('approvalDetail.applyAmt')">
            </el-table-column>
            <!-- 申请时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='crtTime'
            width="140"
            :label="$t('approvalDetail.crtTime')">
            </el-table-column>
            <!-- 放款本金 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='approvedAmt'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.loanBenjin')">
            </el-table-column>
            <!-- 放款金额 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='neteceipts'
            width="140"
            :formatter="cashFormatter"
            :label="$t('approvalDetail.neteceipts')">
            </el-table-column>
            <!-- 放款时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='lendDate'
            width="140"
            :label="$t('approvalDetail.loanTime')">
            </el-table-column>
            <!-- 初/复审通过时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='checkDate'
            width="140"
            :label="$t('loanDetails.chuFuTime')">
            </el-table-column>
            <!-- 终审通过时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='checkFinishDate'
            width="140"
            :label="$t('loanDetails.zhongShenTime')">
            </el-table-column>
            <!-- 订单状态 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='status'
            width="140"
            :label="$t('approvalDetail.orderStatus')">
            </el-table-column>
            
              <!-- 还款结清时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='realRepayDate'
            width="140"
            :label="$t('loanDetails.hkJqSj')">
            </el-table-column>
            <!-- 借款App -->
            <el-table-column
            header-align='center'
            align='center'
            prop='appPackageName'
            width="140"
            :label="$t('loanDetails.Jkapp')">
            </el-table-column>
            <!-- 操作 -->
            <el-table-column 
              header-align='center'
              align='center'
              :label="$t('dispatch.others')"
              width="100" fixed="right" > 
                  <template slot-scope="scope">
                      <el-button type="text" size="small" @click="handleClick(scope.row)">{{$t('approvalDetail.hitsee')}}</el-button>
                  </template> 
              </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
      </el-card>
      <!-- 其他参数对话框 -->
      <el-dialog
      :title="$t('dispatch.others')"
      :visible.sync="centerDialogVisible"
      width="60%"
      center>
      <div>
        <el-table
            :data="customerInfoDetail"
            border
            stripe
            style="width: 100%">
          <!-- 注册时间 wu-->
            <el-table-column
            header-align='center'
            align='center'
            prop='registrationTime'
            width="140"
            :label="$t('customQuery.customerCrtTime')">
            </el-table-column>
            <!-- 息费率 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='interestRate'
            width="140"
            :label="$t('loanDetails.xiFeiLv')">
            </el-table-column>
            <!-- 扣款方式 wu-->
            <el-table-column
            header-align='center'
            align='center'
            prop='deductionMethod'
            width="140"
            :label="$t('loanDetails.koukuanStyle')">
            </el-table-column>
            <!-- 借款期限 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='proName'
            width="140"
            :label="$t('product.LoanPeriod')">
            </el-table-column>
            <!-- 应还款时间 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='lastPayDate'
            width="140"
            :label="$t('loanDetails.yingHuanTime')">
            </el-table-column>
            <!-- 应还款金额 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='amountPayable'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yingHuanjine')">
            </el-table-column>
            <!-- 应还本金 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='principalPayable'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yingHuanbenjin')">
            </el-table-column>
            <!-- 应还利息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='interestPayable'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yingHuanlIxia')">
            </el-table-column>
            <!-- 应还服务费 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='payableServiceCharge'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yingHuanfuwufei')">
            </el-table-column>
            <!-- 应还罚息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='penaltyPayable'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yingHuanfaxi')">
            </el-table-column>
            <!-- 逾期天数 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='overdueDay'
            width="140"
            :label="$t('processing.overDay')">
            </el-table-column>
            <!-- 逾期罚息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='overdueAmt'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yuQiFaXi')">
            </el-table-column>
            <!-- 逾期综合利息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='overdueInterest'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yuQiZhLx')">
            </el-table-column>
              <!-- 逾期本金 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='overduePrincipal'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yuQiBenJin')">
            </el-table-column>
            
            <!-- 总已还金额 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='amountRepaid'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.zyHkJe')">
            </el-table-column>
            <!-- 已还本金 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='principalRepaid'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yHbj')">
            </el-table-column>
            <!-- 已还利息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='interestRepaid'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yHlx')">
            </el-table-column>
            <!-- 已还服务费 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='repaidServiceCharge'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yHfwf')">
            </el-table-column>
            <!-- 已还罚息 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='penaltyRepaid'
            width="140"
            :formatter="cashFormatter"
            :label="$t('loanDetails.yHfx')">
            </el-table-column>
            <!-- 申请来源 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='userSource'
            width="140"
            :label="$t('loanDetails.sQly')">
            </el-table-column>
            <!-- 年龄 -->

            <el-table-column
            header-align='center'
            align='center'
            prop='age'
            width="140"
            :label="$t('RiskManager.age')">
            </el-table-column>
            <!-- 性别 -->

            <el-table-column
            header-align='center'
            align='center'
            prop='sex'
            width="140"
            :label="$t('user.sex')">
            </el-table-column>
            <!-- 省（身份证） -->
            <el-table-column
            header-align='center'
            align='center'
            prop='province'
            width="140"
            :label="$t('loanDetails.sSfz1')">
            </el-table-column>
            <!-- 市（身份证） -->
            <el-table-column
            header-align='center'
            align='center'
            prop='city'
            width="140"
            :label="$t('loanDetails.sSfz2')">
            </el-table-column>
            <!-- 区（身份证） -->
            <el-table-column
            header-align='center'
            align='center'
            prop='district'
            width="140"
            :label="$t('loanDetails.qSfz')">
            </el-table-column>
            <!-- 申请用途 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='moneyToDo'
            width="140"
            :label="$t('loanDetails.sQyt')">
            </el-table-column>
            <!-- 居住省 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='liveProvince'
            width="140"
            :label="$t('loanDetails.jZs')">
            </el-table-column>
            <!-- 居住市 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='liveCity'
            width="140"
            :label="$t('loanDetails.jZs1')">
            </el-table-column>
            <!-- 居住区 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='liveDistrict'
            width="140"
            :label="$t('loanDetails.jZq')">
            </el-table-column>
            <!-- 职业 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='jobLevel'
            width="140"
            :label="$t('approvalDetail.Occupation')">
            </el-table-column>
            <!-- 学历 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='education'
            width="140"
            :label="$t('approvalDetail.education')">
            </el-table-column>
            <!-- 收入 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='salary'
            width="140"
            :label="$t('loanDetails.sR')">
            </el-table-column>
            <!-- 用户婚否 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='marriage'
            width="140"
            :label="$t('loanDetails.yHhf')">
            </el-table-column>
            <!-- 用户子女数 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='sonsNum'
            width="140"
            :label="$t('loanDetails.yHzns')">
            </el-table-column>
            <!-- 用户居住时长 -->
            <el-table-column
            header-align='center'
            align='center'
            prop='residenceTime'
            width="140"
            :label="$t('loanDetails.yHjzsc')">
            </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" style="text-align: center;padding-top: 20px;">
          <el-button type="primary" @click="centerDialogVisible = false">{{$t('btn.close')}}</el-button>
      </div>
      </el-dialog>
      <!-- 查看Excel URL -->
      <el-dialog
      :visible.sync="centerDialogVisible1"
      width="60%"
      center>
      <div style="padding-top: 20px;">
        <el-table
            :data="urlList"
            border
            stripe
            style="width: 100%">
          <!-- 文件名-->
            <el-table-column
            header-align='center'
            align='center'
            prop='fileName'
            :label="$t('loanDetails.wJm')">
            </el-table-column>
            <!-- 地址 -->
            <el-table-column
            header-align='center'
            align='center'
            :label="$t('loanDetails.xZdz')">
            <template slot-scope="scope">
              <a :href="scope.row.href" style="color:#20a0ff;" class="href" target="_blank">{{$t('dispatch.download')}}</a>
            </template>
            </el-table-column>
        </el-table>
      </div>
      <div class="dialog-footer" style="text-align: center;padding-top: 20px;padding-bottom: 10px;">
          <el-button type="primary" @click="centerDialogVisible1 = false">{{$t('btn.close')}}</el-button>
      </div>
      </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { loanDetail, exportData, findExcelAddress } from 'api/reportForm/loanDetails/index'
import { parseURL, formatCash } from 'utils/index'
export default {
  data() {
    return {
      define: '',
      centerDialogVisible: false,
      centerDialogVisible1: false,
      loanDetails_btn_export: false,
      loanDetails_btn_black_export: false,
      listLoading: false,
      total: null,
      expDis: true,
      listQuery: {
        msgType: 1,      // 1,"中文",2,"英语",3,"印尼语"
        page: 1,		 // pageType = 2 3 时 随便给值即可
        limit: 10,     // pageType = 2 3 时 随便给值即可
        exportType: 2,  // "1","需要导出","2","不需要导出"
        pageType: 1,    // "1","默认查询分页","2","查看详情",3,导出
        orderId: '',    // pageType = 2 时 必传
        userUuid: '',    // pageType = 2 时 必传
        userId: '',		  // pageType = 2 时 必传
        // 以上是必传参数
        channel: '',
        startDate: '',  // 申请开始时间
        endDate: '',   // 申请结束时间
        lastPayStartDate: '', // 到期开始时间
        lastPayEndDate: '', // 到期结束时间
        isContinuedLoan: '', // 是否续贷
        loanStartDate: '', // 放款开始时间
        loanEndDate: '', // 放款结束时间
        repaymentStartDate: '', // 结清开始时间
        repaymentEndDate: '', // 结清结束时间
        orderStatus: '', // 订单状态
        // orderId: '', // 订单ID
        mobile: '', // 手机号
        userName: '' // 用户姓名
      },
      tableData: [],
      customerInfoDetail: [],
      multipleSelection: [],
      // 是否续贷下拉数据源
      conLoan: [
        {
          value: '',
          label: this.$t('rule.all')
        },
        {
          value: 0,
          label: this.$t('approvalDetail.no')
        },
        {
          value: 1,
          label: this.$t('approvalDetail.yes')
        }
      ],
      // 订单状态下拉数据源
      orderStatusList: [
        {
          value: '',
          label: this.$t('rule.all')
        }, {
          value: 1,
          label: this.$t('loanDetails.shenHz')
        }, {
          value: 2,
          label: this.$t('loanDetails.daiFk')
        }, {
          value: 3,
          label: this.$t('loanDetails.yFk')
        }, {
          value: 4,
          label: this.$t('loanDetails.yJj')
        }, {
          value: 5,
          label: this.$t('loanDetails.yJq')
        }, {
          value: 6,
          label: this.$t('loanDetails.yYq')
        }, {
          value: 7,
          label: this.$t('loanDetails.yZq')
        }, {
          value: 8,
          label: this.$t('loanDetails.fKsB')
        }, {
          value: 9,
          label: this.$t('loanDetails.yZf')
        }, {
          value: 10,
          label: this.$t('loanDetails.zDfK')
        }
      ],
      urlList: []
    };
  },
  computed: {
    ...mapGetters(['elements', 'language', 'getReportDefine'])
  },
  created() {
    // if (this.statisticsPage.has(this.$route.path)) {
    //   this.listQuery = this.statisticsPage.get(this.$route.path)
    // }
    if (this.language === 'zh') {
      this.listQuery.msgType = 1
    } else if (this.language === 'en') {
      this.listQuery.msgType = 2
    } else {
      this.listQuery.msgType = 3
    }
    this.loanDetails_btn_export = this.elements['loanDetails:btn_export']
    this.loanDetails_btn_black_export = this.elements['loanDetails:btn_black_export']
    this.initTime();
    this.search();
    // 获取报表定义
    this.getReportDefine.forEach(item => {
      if (item.dictCode === 'LOAN_DETAILS') {
        this.define = item.dictValue
      }
    })
  },
  methods: {
    // 金额加分隔符
    cashFormatter(row, col, cellValue) {
      return formatCash(cellValue);
    },
    // 执行导出后台
    handleDownload() {
      this.listLoading = true
      this.initExportDataCondition()
      // console.log(JSON.stringify(this.listQuery))
      exportData(this.listQuery).then(res => {
        if (res.status === 200) {
          // const rows = res.data.rows
          this.listLoading = false
          this.$message({ message: this.$t('dispatch.exportWarn'), type: 'success' })
          // require.ensure([], () => {
          //   const { export_json_to_excel } = require('@/vendor/Export2Excel')
          //   const tHeader = [
          //     this.$t('collDetail.orderIds'),
          //     this.$t('collDetail.phoneNo'),
          //     this.$t('user.name'),
          //     this.$t('loanDetails.isGoLoan'),
          //     this.$t('approvalDetail.applyAmt'),
          //     this.$t('approvalDetail.crtTime'),
          //     this.$t('loanDetails.loanBenjin'),
          //     this.$t('approvalDetail.neteceipts'),
          //     this.$t('approvalDetail.loanTime'),
          //     this.$t('product.LoanPeriod'),
          //     this.$t('loanDetails.chuFuTime'),
          //     this.$t('loanDetails.zhongShenTime'),
          //     this.$t('approvalDetail.orderStatus'),
          //     this.$t('loanDetails.hkJqSj'),
          //     this.$t('loanDetails.Jkapp'),
          //     this.$t('customQuery.customerCrtTime'),
          //     this.$t('loanDetails.xiFeiLv'),
          //     this.$t('loanDetails.koukuanStyle'),
          //     this.$t('loanDetails.yingHuanTime'),
          //     this.$t('loanDetails.yingHuanjine'),
          //     this.$t('loanDetails.yingHuanbenjin'),
          //     this.$t('loanDetails.yingHuanlIxia'),
          //     this.$t('loanDetails.yingHuanfuwufei'),
          //     this.$t('loanDetails.yingHuanfaxi'),
          //     this.$t('processing.overDay'),
          //     this.$t('loanDetails.yuQiFaXi'),
          //     this.$t('loanDetails.yuQiFaXi'),
          //     this.$t('loanDetails.yuQiBenJin'),
          //     this.$t('loanDetails.zyHkJe'),
          //     this.$t('loanDetails.yHbj'),
          //     this.$t('loanDetails.yHlx'),
          //     this.$t('loanDetails.yHfwf'),
          //     this.$t('loanDetails.yHfx'),
          //     this.$t('loanDetails.sQly'),
          //     this.$t('RiskManager.age'),
          //     this.$t('user.sex'),
          //     this.$t('loanDetails.sSfz1'),
          //     this.$t('loanDetails.sSfz2'),
          //     this.$t('loanDetails.qSfz'),
          //     this.$t('loanDetails.sQyt'),
          //     this.$t('loanDetails.jZs'),
          //     this.$t('loanDetails.jZs1'),
          //     this.$t('loanDetails.jZq'),
          //     this.$t('approvalDetail.Occupation'),
          //     this.$t('approvalDetail.education'),
          //     this.$t('loanDetails.sR'),
          //     this.$t('loanDetails.yHhf'),
          //     this.$t('loanDetails.yHzns'),
          //     this.$t('loanDetails.yHjzsc')
          //   ]
          //   const filterVal = [
          //     'orderId', 'appUserName', 'userRealName', 'isContinuedLoanValue', 'applyAmt', 'crtTime',
          //     'approvedAmt', 'neteceipts', 'lendDate', 'proName', 'checkDate', 'checkFinishDate',
          //     'status', 'realRepayDate', 'appPackageName', 'registrationTime', 'interestRate',
          //     'deductionMethod', 'lastPayDate', 'amountPayable', 'principalPayable', 'interestPayable',
          //     'payableServiceCharge', 'penaltyPayable', 'overdueDay', 'overdueAmt', 'overdueInterest',
          //     'overduePrincipal', 'amountRepaid', 'principalRepaid', 'interestRepaid', 'repaidServiceCharge',
          //     'penaltyRepaid', 'userSource', 'age', 'sex', 'province', 'city', 'district', 'moneyToDo',
          //     'liveProvince', 'liveCity', 'liveDistrict', 'jobLevel', 'education', 'salary', 'marriage',
          //     'sonsNum', 'residenceTime'
          //   ]
          //   const list = rows
          //   console.log(list)
          //   const data = this.formatJson(filterVal, list)
          //   export_json_to_excel(tHeader, data, this.$t('route.loanDetails'))
          //   this.listLoading = false;
          // })
        }
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 查看导出URL
    handleViewExcelUrl() {
      this.listLoading = true
      findExcelAddress().then(res => {
        this.listLoading = false
        if (res.status === 200) {
          this.urlList = []
          const urls = res.data || []
          urls.forEach(url => {
            if (url) {
              this.urlList.push({
                fileName: parseURL(url).file,
                href: url
              })
            }
          })
          this.centerDialogVisible1 = true
        }
      })
    },
    // 查看详情
    handleClick(row) {
      this.listQuery.exportType = 2
      this.listQuery.pageType = 2
      const params = Object.assign({}, this.listQuery)
      params.orderId = row.orderId
      params.userUuid = row.userUuid
      params.userId = row.userId
      // console.log(JSON.stringify(this.listQuery))
      loanDetail(params).then(res => {
        if (res.status === 200) {
          this.customerInfoDetail = []
          if (res.data && res.data.rows) {
            const rows = res.data.rows
            this.customerInfoDetail.push(rows[0])
            this.centerDialogVisible = true
          }
        }
      })
    },
    GetDateStr(AddDayCount) {
      let dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount);// 获取AddDayCount天后的日期
      let y = dd.getFullYear();
      let m = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1); // 获取当前月份的日期，不足10补0
      let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
      return y + '-' + m + '-' + d;
    },
    getList() {
      this.listLoading = true
      loanDetail(this.listQuery).then(res => {
        this.listLoading = false
        if (res.status === 200) {
          this.expDis = false
          this.tableData = res.data.rows
          this.total = parseInt(res.data.total)
        }
      })
      // this.$store.dispatch('saveStatisticsPage', { path: this.$route.path, listQuery: this.listQuery });
    },
    // 查询
    search() {
      this.listQuery.page = 1;
      this.initSearchCondition()
      this.getList();
    },
    initSearchCondition() {
      this.listQuery.exportType = 2
      this.listQuery.pageType = 1
    },
    initExportDataCondition() {
      this.listQuery.exportType = 1
      this.listQuery.pageType = 3
    },
    // 重置
    reset() {
      this.listQuery.limit = 10;
      this.listQuery.page = 1;
      this.listQuery.lastPayStartDate = ''
      this.listQuery.lastPayEndDate = ''
      this.listQuery.isContinuedLoan = ''
      this.listQuery.loanStartDate = ''
      this.listQuery.loanEndDate = ''
      this.listQuery.repaymentStartDate = ''
      this.listQuery.repaymentEndDate = ''
      this.listQuery.orderStatus = ''
      this.listQuery.orderId = ''
      this.listQuery.mobile = ''
      this.listQuery.userName = ''
      this.initTime()
    },
    initTime() {
      this.listQuery.startDate = this.GetDateStr(-2);
      this.listQuery.endDate = this.GetDateStr(0);
    },
    // 选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.initSearchCondition()
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.initSearchCondition()
      this.getList()
    }
  }
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.title {
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before{
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.menu-title {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .searchItem {
    display: flex;
    align-items: center;
    padding: 10px  0;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      font-size: 12px;
      color: #5f5f61;
      padding-right: 5px;
    }
    div:nth-child(2) {
      width: 150px;
    }
  }
  .searchItem-date {
    display: flex;
    align-items: center;
    padding: 10px  0;
    b {
      margin: 0 10px;
      font-weight: normal;
      font-size: 12px;
      color: #5f5f61;
    }
    div {
       width: 150px;
    }
  }
}
.menu-title-btn {
  padding: 10px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
    &:nth-child(2) {
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
}
.menu-list {
  padding: 20px 0;
  box-sizing: border-box;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 10px;
    &:nth-child(1) {
      margin-left: 0;
    }
  }
  button[disabled] {
    padding: 0 20px;
    height: 28px;
    background: #c1e0ff;
    color: #fafbff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
  }
  a.href {
    text-decoration: underline;
    color: #20a0ff;
  }
}
.head-title2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btns {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
  background-image: url("../../../assets/images/question-mark.svg");
}
</style>